<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>人员异常行为智能分析系统</title>
    <link rel="shortcut icon" href="favicon.ico">
	<link   th:href="@{/bigdata/css/wodry.css}" rel="stylesheet">
	<link  th:href="@{/bigdata/css/index.css}" rel="stylesheet">
	<link   th:href="@{/bigdata/css/public.css}" rel="stylesheet">
	<link   th:href="@{/bigdata/css/mv.css}" rel="stylesheet">
</head>
<style>
	body,
	html,
	#allmap {
		overflow: hidden;
		width: 100%;
		height: 100%;
		margin: 0;
		font-family: "微软雅黑";
	}
	ul li {
		list-style: none;
	}
	.drawing-panel {
		z-index: 999;
		position: relative;
		bottom: 46.2%;
		margin-left: 47.3%;
		padding: 1rem 1rem;
		border-radius: .25rem;

	}
	.btn {
		width: 90px;
		height: 30px;
		float: left;
		background-color: #fff;
		color: rgba(27, 142, 236, 1);
		font-size: 14px;
		border:1px solid rgba(27, 142, 236, 1);
		border-radius: 5px;
		margin: 0 5px;
		text-align: center;
		line-height: 30px;
	}
	.btn:hover {
		background-color: rgba(27, 142, 236, 0.8);
		color: #fff;
	}
</style>
<body>

<div class="main">
<input type="hidden" id="orgId" th:value="${org.id}" >
	<div class="header">
		<div class="header-left fl" id="time"></div>
		<div class="header-center fl">
			<div class="header-title">
				人员异常行为智能分析系统
			</div>
			<div class="header-img"></div>
		</div>
		<div class="header-right fl">
			<ul style="height: 30px; margin-bottom: 0px;">
			<li class="l_left total_chose_pl nav_active"><a th:href="@{/index}">管理后台</a></li>
<!--				<li class="r_right total_chose_pl">统计分析四</li>-->
<!--				<li class="r_right total_chose_pl">统计分析五</li>-->

		</ul>
		</div>
		<div class="header-bottom fl"></div>

	</div>

	<div class="center">
		<div class="center-left fl">

			<div class="left-cen rightTop border">
				<div class="title" id="event_title">模型列表</div>

<!--				<ul class="company" id="ceshi" style="font-size: 0.25rem;">-->

<!--				</ul>-->

				<div class="right-mid">
<!--					<div class="right-mid-header">-->
<!--						实时数据-->
<!--					</div>-->
					<div class="right-mid-scroll">
						<div class="right-mid-content" id="ceshi">

<!--							<div class="right-top-content">-->
<!--								<a href="https://jindun.cdn.bcebos.com/d56bee514e37b48d515a13b911ac1e8d.mp4" target="_blank" class="name" >查看</a>-->
<!--							</div>-->
<!--							<div class="dataAllBorder01 cage_cl " style="margin-top: 2% !important; height: 24%;">-->
<!--								<video   class="dataAllBorder02 video_cage" controls="true">-->
<!--									<source class="video" title="主监控位" src="https://jindun.cdn.bcebos.com/d56bee514e37b48d515a13b911ac1e8d.mp4"/>-->
<!--								</video>-->
<!--							</div>-->


<!--							<div class="right-top-content">-->
<!--								<a href="" class="name" >查看</a>-->
<!--							</div>-->
<!--							<div class="dataAllBorder01 cage_cl" style="margin-top: 2% !important; height: 24%;">-->
<!--								<video  controls="true" class="dataAllBorder02 video_cage">-->
<!--									<source class="video" title="主监控位" src="../video/s3.mp4"/>-->
<!--								</video>-->
<!--							</div>-->


						</div>



					</div>
				</div>

			</div>
			<div class="left-bottom rightTop border">
				<div class="title" id="pie_title">风险报告</div>
				<div class="bottom-b">
					<div id="chart3" class="allnav"></div>
				</div>


			</div>
		</div>
		<div class="center-cen fl">
			<div class="cen-top rightTop border">
				<div class="total_chose_box" >
					<div style="height: 32px;"></div>
					<span class="chose_tltle" >示范地选择：</span>

					<select class="year_chose"    onchange="selectOnchang(this.value)"  th:with="type=${rOrgs}">
						<option class="chose_enter"  th:each="dict:${type}"   th:value="${dict.id+'_'+dict.name}" th:text="${dict.name}" th:field="*{org.name}"></option>
					</select>
<!--					<select class="year_chose"  onchange="selectOnchang(this.value)"  >-->
<!--						<option th:selected="${orgId==1||orgId==0}" class="chose_enter" value="殷墟">殷墟</option>-->
<!--						<option th:selected="${orgId==2}" class="chose_enter" value="当阳">当阳</option>-->
<!--&lt;!&ndash;						<option class="chose_enter" value="敦煌">敦煌</option>&ndash;&gt;-->
<!--					</select>-->
				</div>


				<div class="top-bottom" style="top: 0.01rem">
<!--					<div id="map" class="allnav" style="height: 6.4rem"></div>-->
					<div id="allmap" class="allnav" style="height: 6.4rem"></div>
					<ul class="drawing-panel" style="z-index: 99;display:none">
						<li class = "btn" onclick = "pauseAni()">暂停</li>
						<li class = "btn" onclick = "continueAni()">继续</li>
					</ul>
				</div>

			</div>
			<div class="cen-bottom rightTop border">
				<div class="title" id="line_title">事件详情及历史记录</div>
				<div class="bottom-b">
					<div id="chart4" class="allnav"></div>
				</div>

			</div>
		</div>
		<div class="center-right fr">
			<div class="right-top rightTop border">
				<div class="title" id="exception_title">异常事件</div>

				<div class="echart wenzi">
					<div class="gun">
						<span style="width:10%">序号</span>
						<span>异常类型</span>
						<span>异常事件</span>
						<span style="margin-left: 22px;">时间</span>
					</div>
					<div id="FontScroll" class="myscroll">
						<ul id="exception_list">


						</ul>
					</div>
				</div>

			</div>
			<div class="right-cen border">
<!--				<div class="title" id="level_title">风险等级</div>-->
<!--				<div class="right-cen-cent wenzi">-->
<!--					<ul class="company" id="level_list" style="font-size: 0.4rem; padding-left: 0.6rem;">-->

<!--					</ul>-->
<!--				</div>-->
				<div class="dataAllBorder01 cage_cl" style="margin-top: 0.1% !important;  position: relative;">
					<div class="dataAllBorder02" style="padding: 1.2%; overflow: hidden">
						<div class="title" id="level_title1">威胁风险等级</div>
						<div class="message_scroll_box1" style="margin-top: 4%;" id="level_list">
							<div class="message_scroll">
								<div class="scroll_top">
									<span class="scroll_title" id="level_title">风险等级</span>
									<span class="scroll_level scroll_level01">一级</span>
									<a class="localize01"></a>
									<span class="scroll_timer">17-09-13/9:52</span>
								</div>
								<div class="msg_cage">
									<a class="localize_title">下载大量视频</a>
								</div>
								<div class="msg_cage">
									<a class="localize_msg">火灾</a>
								</div>
							</div>


						</div>

					</div>

				</div>


			</div>
			<div class="right-bottom rightTop border">
				<div class="title" id="data_title">样本库</div>
				<div class="gun">
					<span style="width:10%">序号</span>
					<span style="width:25%;">样本类型</span>
					<span style="width:42%;">名称</span>
				</div>
				<ul class="company message_scroll_box" id="data_list" style=" padding-left: 0.4rem; padding-top: 0.4rem;">

				</ul>
			</div>
		</div>
	</div>


</div>
<script  th:src="@{/bigdata/js/jquery.js}"></script>
<th:block th:include="include :: bootstrap-select-js" />
<script   th:src="@{/bigdata/js/jquery.min.js}"></script>
<script   th:src="@{/bigdata/js/echarts.min.js}"></script>
<script  th:src="@{/bigdata/js/wodry.min.js}"></script>
<script  th:src="@{/bigdata/js/fontscroll.js}"></script>
<script th:src="@{/bigdata/js/echarts.js}"></script>
<script  th:src="@{/bigdata/js/china.js}"></script>
<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=5qtleqpZBB3nSaSWyHtnBknmrnR2018Y"></script>
<!-- 开发需要替换密钥 可以在百度地图开放平台申请 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5qtleqpZBB3nSaSWyHtnBknmrnR2018Y"></script>
<!-- 点聚合需引用 -->
<!--<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>-->
<!--<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>-->
<script type="text/javascript">

	function TimeControl(){
		$(".message_scroll_box").animate({marginBottom:26},80,
				function(){
					$(".message_scroll_box").css({marginBottom:0});    //把顶部的边界清零
					$(".message_scroll_box .message_scroll:last").before($(".message_scroll_box .message_scroll:first"));    //在第一个新闻后面插入最后一个新闻

				});
	}
	var T=setInterval(TimeControl,3300);    //开始定时
	$(".message_scroll_box").mouseenter(function(){
		clearInterval(T);    //停止定时
	})
			.mouseleave(function(){
				T=setInterval(TimeControl,3500);    //再次定时
			})




	function getBoundary(area,color){
		var bdary = new BMap.Boundary();
		bdary.get(area, function(rs){       //获取行政区域
			//map.clearOverlays();        //清除地图覆盖物
			var count = rs.boundaries.length; //行政区域的点有多少个
			if (count === 0) {
				alert('未能获取当前输入行政区域');
				return ;
			}
			var pointArray = [];
			for (var i = 0; i < count; i++) {
				var ply = new BMap.Polygon(rs.boundaries[i], {strokeColor:"green",fillColor: color ,fillOpacity:"0.3",strokeOpacity:0.3,strokeWeight: 2}); //建立多边形覆盖物
				map.addOverlay(ply);  //添加覆盖物
				pointArray = pointArray.concat(ply.getPath());
			}
			//map.setViewport(pointArray);    //调整视野
		});
	}
	// 将地址解析结果显示在地图上,并调整地图视野
	function getPoint(address,city,img) {
		// 创建地址解析器实例
		var myGeo = new BMap.Geocoder();
		myGeo.getPoint(address, function(point){
			if (point) {
				var myIcon = new BMap.Icon(img, new BMap.Size(30,30));
				var marker = new BMap.Marker(point,{icon:myIcon});
				//map.centerAndZoom(point, 16);
				var marker2 = new BMap.Marker(point);
				map.addOverlay(marker);  //描点
				var opts = {
					width : 280,     // 信息窗口宽度
					height: 150,     // 信息窗口高度
					title : "<span class='content'>详细信息</span>" , // 信息窗口标题
				}
				var infoWindow = new BMap.InfoWindow("<font class='content'>地址："+address+"<br/>坐标:"+point.lng+"," +point.lat+
						"<br/><a href='javascript:void(0)' onclick='alert(\"啦啦啦!!!\")' style='font-size:18px;color:blue;text-decoration:underline;'>点击有惊喜！！！</a></font>"
						,opts);  //创建信息窗口对象
				//鼠标点击事件
				marker.addEventListener("click", function(){
					map.openInfoWindow(infoWindow,point); //开启信息窗口
					map.centerAndZoom(point,14);
				});
				// //鼠标移入事件
				//  marker.addEventListener("mouseover", function(){
                //     map.openInfoWindow(infoWindow,point); //开启信息窗口
                // });
			}else{
				alert("您选择地址没有解析到结果!");
			}
		}, city);
	}


	function selectOnchang(obj){
		console.log(obj)
		let check_id = obj.split("_")[0];
		$("#orgId").val(check_id);
		// show_map1(check_id,1)
		show_map(check_id,1)
		// if(obj=='殷墟'){
		// 	$("#orgId").val(1);
		// 	// var point = new BMapGL.Point(114.33178,36.127752)
		// 	// map.centerAndZoom(point,17);
		// 	check_id=1;
		// 	show_map1(check_id,1)
		// }else if(obj=='当阳'){
		// 	$("#orgId").val(2);
		// 	// var point = new BMapGL.Point(111.78912,30.8208)
		// 	// map.centerAndZoom(point,17);
		// 	check_id=2;
		// 	show_map1(check_id,1)
		// }else if(obj=='敦煌'){
		// 	$("#orgId").val(3);
		// 	// var point = new BMapGL.Point(94.66159,40.14211)
		// 	// map.centerAndZoom(point,17);
		// 	check_id=3;
		// 	show_map1(check_id,1)
		// }
		    let check_name = obj.split("_")[1];
		    show_pie(check_name, check_id)
		    show_line(check_name, check_id)
		    show_event(check_name, check_id)
		    show_exception(check_name, check_id)
		    show_level(check_name, check_id)
		    show_data(check_name, check_id)
	}

</script>
<script>
	$(document).ready(function () {
		var whei = $(window).width()
		$("html").css({ fontSize: whei / 22 });
		$(window).resize(function () {
			var whei = $(window).width();
			$("html").css({ fontSize: whei / 22 })
		});
		$(function () {
			show_map2($("#orgId").val(),0);
			// show_map1($("#orgId").val());
			show_map($("#orgId").val());
		});
		// setTimeout('show_map1($("#orgId").val())', 3000);
		//清楚定时器
		clearInterval(this.timer)
		this.timer = setInterval(() => {
			 show_map2($("#orgId").val(),1);
		}, 1000*15)

		//清楚定时器
		clearInterval(this.timer1)
		this.timer1 = setInterval(() => {
			// show_map1($("#orgId").val());
			show_map($("#orgId").val());
		}, 30000)
	});
	//顶部时间
	function getTime(){
		var myDate = new Date();
		var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
		var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
		var myToday = myDate.getDate(); //获取当前日(1-31)
		var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
		var myHour = myDate.getHours(); //获取当前小时数(0-23)
		var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
		var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
		var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
		var nowTime;

		nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
		//console.log(nowTime);
		$('#time').html(nowTime);
	};
	function fillZero(str){
		var realNum;
		if(str<10){
			realNum	= '0'+str;
		}else{
			realNum	= str;
		}
		return realNum;
	}
	setInterval(getTime,1000);

</script>

</body>
</html>
